<!--
 * @Description: 设置员工角色
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-10-30 14:28:39
 * @LastEditors: 付小清
 * @LastEditTime: 2020-12-21 19:26:33
-->

<template>
  <div class="mainbox">
    <el-container>
      <el-header height="auto">
        <search
          :search="searchs"
          @get-list="onSubmit"
          @init-params="onReset()"
        />
      </el-header>
      <el-container>
        <el-main>
          <div class="title">员工列表</div>
          <adminTable
            ref="refStaffTable"
            :search-show="false"
            :search-btn="false"
            :selection-list.sync="staffCheckList"
            :api-fun="apiFunEmp"
            :table-data.sync="staffTableData"
          >
            <!-- 表格操作 -->
            <template slot="column">
              <el-table-column type="selection" width="55" align="center" />
              <!-- <el-table-column label="序号" type="index" width="50" /> -->
              <el-table-column
                v-for="(item, index) in staffJClumen"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                align="center"
              >
                <template slot-scope="scope">
                  <template v-if="scope.column.property === 'gender'">
                    <span v-if="scope.row.gender == 0">女</span>
                    <span v-else-if="scope.row.gender == 1">男</span>
                    <span v-else>&nbsp;</span>
                  </template>
                  <span v-else>{{ scope.row[scope.column.property] }}</span>
                </template>
              </el-table-column>
            </template>
          </adminTable>
        </el-main>
        <el-main>
          <div class="title">员工当前角色</div>
          <RoleTable
            ref="refRoleTable"
            :user-id="staffIds"
            :selection-list.sync="roleCheckList"
            :table-data.sync="roleTableData"
          />
        </el-main>
      </el-container>
    </el-container>
    <div style="margin-top: 15px; text-align: center">
      <el-button
        type="primary"
        :disabled="includeAdmin"
        @click="rolesAllocation"
      >
        角色分配
      </el-button>
      <el-button :disabled="includeAdmin" @click="deleteClick">删除</el-button>
    </div>
    <!-- 角色分配弹窗 -->
    <RoleAssignment
      :show.sync="dialogFormVisible"
      :staff-list="staffIds"
      :role-list.sync="roleTableData"
      @refresh="refreshList"
    />
  </div>
</template>

<script>
// 组件引入
import adminTable from '@/components/admin/admin-table'
import RoleAssignment from './components/RoleAssignment'
import RoleTable from './components/RoleTable.vue'
import search from '@/components/admin/search.vue'
// 接口
import { permissionEmp, permissionRole, deleteEmpRole } from '@/api/system'
// 页面配置
import { staffJClumen, roleJClumen, staffJSearchs } from './count.js'
// 公共方法
import { openMessageBox } from '@/utils/utils'

export default {
  components: {
    adminTable,
    RoleAssignment,
    RoleTable,
    search
  },
  data() {
    return {
      staffJClumen: staffJClumen,
      staffTableData: [],
      staffCheckList: [],
      staffIds: [], // 选中员工的ID
      roleJClumen: roleJClumen,
      roleTableData: [],
      roleCheckList: [],
      searchs: staffJSearchs,
      apiFunEmp: permissionEmp,
      apiFunRole: permissionRole,
      dialogFormVisible: false
    }
  },
  computed: {
    size() {
      return this.$store.getters.size
    },
    // 角色分配按钮包含 admin 的处理
    includeAdmin() {
      return Boolean(this.staffIds.indexOf('000000') !== -1 ? 1 : 0)
    }
  },
  watch: {
    staffCheckList: {
      handler(val) {
        if (val.length) {
          this.handleSelectionChange()
        } else {
          this.staffIds = []
        }
      }
    }
  },
  methods: {
    // 选中的员工id
    handleSelectionChange() {
      this.staffIds = this.staffCheckList.map((item) => item.userId)
    },
    // 查询
    onSubmit(param) {
      this.$refs.refStaffTable.getList(param)
    },
    // 重置
    onReset() {
      this.$refs.refStaffTable.getList()
    },
    // 删除员工角色
    deleteClick() {
      if (!this.staffCheckList.length) {
        // 没有选择员工
        this.$message({ message: '请选择员工', type: 'warning' })
      } else if (!this.roleCheckList.length) {
        // 没有选择角色
        this.$message({ message: '请选择角色', type: 'warning' })
      } else {
        // 选中角色ID
        const roleIds = this.roleCheckList.map((item) => item.roleId)
        openMessageBox(
          {
            content: '删除数据后，将不可恢复，是否确认？',
            title: '删除数据'
          },
          (boole) => {
            if (boole) {
              // 删除员工角色接口请求
              deleteEmpRole({
                userIds: this.staffIds,
                roleIds: roleIds
              }).then((res) => {
                const userID = JSON.parse(localStorage.getItem('userInfo')).userId
                console.log(this.staffIds)
                if (this.staffIds.includes(userID)) {
                  this.$message({ message: '设置角色成功，请重新登录', type: 'warning' })
                  this.logout()
                } else {
                  this.$message({ message: '删除成功', type: 'success' })
                  this.$refs.refRoleTable.getList()
                }
              })
            }
          }
        )
      }
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    // 角色分配
    rolesAllocation() {
      console.log(this.staffCheckList.length)
      if (this.staffCheckList.length === 1) {
        this.dialogFormVisible = true
      } else if (this.staffCheckList.length > 1) {
        this.$confirm(
          // '您选择了多个用户，批量添加角色时，将清空之前已选择的角色，请确认',
          '批量添加角色时，只回显共同权限，请确认',
          '批量添加',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false
            // type: 'warning'
          }
        )
          .then(() => {
            // 选择角色列表弹窗
            this.dialogFormVisible = true
          })
          .catch(() => {})
      } else {
        this.$message({ message: '请选择员工', type: 'warning' })
      }
    },
    // 刷新角色列表
    refreshList() {
      this.$refs.refRoleTable.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  height: 30px;
  font-size: 14px;
}
.el-header {
  padding: 0;
}
.el-main {
  padding: 0;
}
.el-main ~ .el-main {
  margin-left: 15px;
}
</style>
